<!--
 * @Author: whflovecn
 * @Date: 2021-04-15 10:06:30
 * @LastEditTime: 2021-05-31 20:32:46
 * @LastEditors: whflovecn
 * @Description: 
 * @FilePath: \users-manager\src\pages\main\views\main\header\NavMenu.vue
-->
<template>
  <div>
    <el-menu
      ref="menu"
      :default-active="$store.state.activeSys.path"
      class="menuLeft"
      mode="horizontal"
      @select="menuSelect"
      background-color="#0A1926"
      text-color="#fff"
      active-text-color="#fff"
      router
    >
      <el-menu-item v-for="item in subSys" :key="item.id" :index="item.path">
        <i :class="item.icon"/>
        <span slot="title">{{item.title}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data(){
    return {
      subSys:[],
    }
  },
  methods: {
    menuSelect(index) {
      const menu = this.subSys.find(item=>item.path==index)
      this.$store.commit('setActiveSys',menu)
    },
  },
  mounted(){
    const token = window.sessionStorage.getItem("token")
    //获取菜单
    this.$api.post("/api/menu").then((data) => {
      console.log(data)
      const { success, result, msg, code } = data;
      if (success) {
        const tree = result.tree
        //第一层都是子系统
        if (tree.length>0){
          this.subSys = result.tree  //将所有菜单赋值给变量，为了循环生成最顶端的子系统菜单
          this.$store.commit('setActiveSys',tree[0])  //记录当前选择的子系统
        }
      } else {
        this.$msg.error('系统错误: '+msg+'！错误代码：'+code)
      }
    });
  },

};
</script>

<style lang="less" scoped>
.menuLeft {
  margin-left: 20px;
}
.el-menu.el-menu--horizontal{
  border-bottom: 0px !important;
}
</style>
<style lang="less">
.menuLeft .el-menu-item:hover {
  background: #223f59 !important;
}
.menuLeft .el-submenu__title:hover {
  background: #223f59 !important;
}
.menuLeft .el-menu-item.is-active {
  background-color: #223f59 !important;
}
.menuLeft .el-submenu.is-active .el-submenu__title {
  background-color: #223f59 !important;
}
</style>
